<template>
  <div class="header">
    <img class="logo" width="160" src="/images/logo.png" alt />
    <el-avatar class="avatar" size="large" :src="avatar"></el-avatar>
  </div>
</template>
<script>
import { Avatar } from "element-ui";
export default {
  components: {
    ElAvatar: Avatar
  },
  computed: {
    avatar() {
      return this.$store.state.teacher.userImg;
    }
  }
};
</script>
<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .logo {
    margin-left: 20px;
  }
  .avatar {
    margin-right: 50px;
  }
}
</style>